<template>
  <view class="swiper-container">
    <!-- 轮播图 -->
    <swiper
      :indicator-dots="true"
      :autoplay="true"
      :interval="3000"
      :duration="500"
      :circular="true"
      class="swiper"
      @change="onSwiperChange"
    >
      <!-- 通过 v-for 渲染 swiper-item -->
      <swiper-item v-for="(item, index) in images" :key="index">
        <image :src="item.src" mode="aspectFill" class="swiper-image"></image>
      </swiper-item>
    </swiper>

    <!-- 右下角的半透明显示框，展示当前图片序号/总数 -->
    <view class="overlay-box">
      <text class="overlay-text">{{ currentIndex + 1 }} / {{ images.length }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 图片路径数组
      images: [

  { src: '/static/index/textbookb.jpg' },
  { src: '/static/index/ad.jpg' },
  { src: '/static/index/ad1.jpg' }


      ],
      currentIndex: 0 // 当前图片索引
    };
  },
  methods: {
    onSwiperChange(e) {
      this.currentIndex = e.detail.current; // 更新当前索引
    }
  }
};
</script>

<style scoped>
.swiper-container {
  position: relative;
  width: 100vw;
  height: 100%;
}

.swiper {
  width: 100vw;
  max-height: 150vw;
  min-height: 66vw;
}

.swiper-image {
  width: 100vw;
  height: 100%;
  object-fit: cover; /* 确保图片按比例填满容器并裁剪溢出部分 */
}

.overlay-box {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  padding: 5px 10px;
  border-radius: 5px;
}

.overlay-text {
  color: white;
  font-size: 12px;
  font-weight: bold;
}
</style>
